<template>
	<div
		class="w-screen h-screen flex bg-gradient-to-r from-sky-500 to-indigo-500"
	>
		<div class="hidden md:flex w-1/2 justify-center items-center h-full">
			<div class="w-5/6">
				<el-image src="/bg.png"></el-image>
				<div class="text-white text-3xl text-center" id="typed"></div>
				<div id="typed-strings">
					<p>
						我是<strong>say-order-vue</strong><br />
						基于easyAi引擎的JAVA高性能,低成本,轻量级智能客服助手
					</p>
					<p>
						全网最快的java<br />
						开源原生智能客服助手
					</p>
					<p>
						可在cpu上无压力高效运行<br />
						开包即用
					</p>
				</div>
			</div>
		</div>
		<div class="w-full md:w-1/2 p-5 flex justify-center items-center">
			<div class="bg-white w-96 p-5 rounded-xl shadow-md flex flex-col">
				<div class="text-3xl mb-10">{{ appConfig.app.name }}</div>
				<el-tabs v-model="activeName">
					<!-- <el-tab-pane label="验证码登录" name="mobile">
						<el-form ref="mobileFormRef" :rules="mobileRules" :model="mobileForm">
							<el-form-item prop="mobile">
								<el-input v-model="mobileForm.mobile" :prefix-icon="User" placeholder="手机号"></el-input>
							</el-form-item>
							<el-form-item prop="captcha">
								<el-input v-model="mobileForm.captcha" :prefix-icon="Lock" placeholder="验证码">
									<template #append>
										<div v-if="codeText == '发送验证码'" class='h-full flex items-center text-blue-500'
											@click='sendCode'>{{ codeText }}</div>
										<div v-else class='h-full flex items-center'>{{ codeText }}</div>

									</template>
</el-input>
</el-form-item>
<el-form-item>
	<el-button class='w-full' @click="submit(mobileFormRef)" type='primary'>登录</el-button>
</el-form-item>

</el-form>
</el-tab-pane> -->
					<el-tab-pane label="密码登录" name="account">
						<el-form ref="formRef" :rules="rules" :model="form">
							<el-form-item prop="account">
								<el-input
									v-model="form.account"
									:prefix-icon="User"
									placeholder="用户名或手机号"
								></el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input
									v-model="form.password"
									show-password
									:prefix-icon="Lock"
									placeholder="密码"
								>
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-button
									class="w-full"
									@click="submit(formRef)"
									type="primary"
									>登录</el-button
								>
							</el-form-item>
						</el-form>
						<!-- <div class="text-sm">首次登录请使用验证码登录方式</div> -->
					</el-tab-pane>
					<!-- <el-tab-pane label="扫码登陆" name="qrcode">
						<div>使用微信扫码登陆<el-button class='mx-2' @click='refresh' link type='primary'>刷新<i
									class="fa fa-refresh"></i></el-button></div>
						<div class="flex justify-center">
							<div class="w-48 h-48" v-qrcode="wxlogin_url"></div>
						</div>
					</el-tab-pane> -->
				</el-tabs>
				<div class="text-sm mt-5">
					登录代表同意{{ appConfig.app.name
					}}<a
						class="text-blue-500"
						:href="appConfig.app.userAgreement"
						target="_blank"
						>用户协议</a
					>、<a
						class="text-blue-500"
						:href="appConfig.app.privacyPolicy"
						target="_blank"
						>隐私政策</a
					>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { User, Lock } from "@element-plus/icons-vue";
	definePageMeta({
		layout: false,
	});
	const appConfig = useAppConfig();
	useHead({
		title: "登陆",
	});
	const route = useRoute();
	const router = useRouter();
	const store = useMainStore();
	const activeName = ref("account");
	const codeText = ref("发送验证码");
	const mobileForm = ref({
		mobile: "",
		captcha: "",
	});
	const form = ref({
		account: "admin",
		password: "admin",
	});
	const mobileRules = ref({
		mobile: [
			{
				required: true,
				message: "请输入手机号",
				trigger: "blur",
			},
			{
				min: 11,
				max: 11,
				message: "手机号长度不对",
				trigger: "blur",
			},
		],
		captcha: [
			{
				required: true,
				message: "请输入验证码",
				trigger: "blur",
			},
			{
				min: 4,
				max: 4,
				message: "验证码长度不对",
				trigger: "blur",
			},
		],
	});
	const rules = ref({
		account: [
			{
				required: true,
				message: "请输入用户名",
				trigger: "blur",
			},
			{
				min: 3,
				max: 11,
				message: "长度在 3 到 11 个字符",
				trigger: "blur",
			},
		],
		password: [
			{
				required: true,
				message: "请输入密码",
				trigger: "blur",
			},
			{
				min: 4,
				max: 20,
				message: "长度在 4 到 20 个字符",
				trigger: "blur",
			},
		],
	});
	const mobileFormRef = ref();
	const formRef = ref();
	const submit = async (formEl) => {
		let path = route.query.path || "/";
		await formEl.validate(async (valid) => {
			// 此处user信息用于模拟登录，正式开发时应当删除
			const user = {
				avatar:
					"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
				nickname: "Admin",
				mobile: "13312345678",
				token: "example-token",
			};
			if (valid) {
				if (formEl === mobileFormRef.value) {
					if (
						mobileForm.value.mobile !== "" &&
						mobileForm.value.captcha == "1234"
					) {
						store.login(user);
						ElMessage.success("登陆成功");
						router.replace(path);
					} else {
						ElMessage.error("验证码错误");
					}
				}
				if (formEl === formRef.value) {
					store
						.login({
							account: form.value.account,
							pass_word: form.value.password,
						})
						.then((res) => {
							console.log(res);
							if (res.value.error === 0) {
								ElMessage.success("登陆成功");
								router.replace(path);
								store.user = res.value.data;
							} else {
								ElMessage.error("账号或密码错误");
							}
						});
				}
			}
		});
	};
	const sendCode = async () => {
		let mobile = mobileForm.value.mobile;
		let regEx = /^[1][\d]{10}/;
		if (!regEx.test(mobile)) {
			ElMessage.error("手机号格式错误");
			return false;
		}
		ElMessage.success("验证码为1234");
		codeText.value = 60;
		let timer = setInterval(() => {
			codeText.value--;
			if (codeText.value < 0) {
				clearInterval(timer);
				codeText.value = "发送验证码";
			}
		}, 1000);
	};
	// 微信登陆
	const wxlogin_url = useWxLogin();
	// 打字效果
	import Typed from "typed.js";
	onMounted(() => {
		var typed = new Typed("#typed", {
			stringsElement: "#typed-strings",
			typeSpeed: 80,
			loop: true,
			showCursor: false,
		});
	});
</script>